import DefaultTheme from 'vitepress/theme'
import CustomLayout from './Layout.vue'
import { watch } from 'vue'
import RainbowAnimationSwitcher from './components/RainbowAnimationSwitcher.vue'
// import Login from './components/Login/index.vue'
import userInfo from './components/userInfo.vue'

import 'virtual:uno.css'
import 'ant-design-vue/dist/reset.css';
import { createPinia } from 'pinia'
import Antd from 'ant-design-vue';
// import './styles/vars.css'
// import './styles/landing.css'
import './rainbow.css'
// import './style.css'
let homePageStyle: HTMLStyleElement | undefined
export default {
  extends: DefaultTheme,
  Layout: CustomLayout,
  enhanceApp({ app, router }) {
    app.component('RainbowAnimationSwitcher', RainbowAnimationSwitcher)
    // app.component('Login', Login)
    app.component('UserInfo', userInfo)
    app.use(Antd)
    app.use(createPinia())
    if (typeof window === 'undefined') return

    watch(
      () => router.route.data.relativePath,
      () => updateHomePageStyle(location.pathname === '/'),
      { immediate: true },
    )
  },
}

// Speed up the rainbow animation on home page
function updateHomePageStyle(value: boolean) {
  if (value) {
    if (homePageStyle) return

    homePageStyle = document.createElement('style')
    homePageStyle.innerHTML = `
    :root {
      animation: rainbow 12s linear infinite;
    }`
    document.body.appendChild(homePageStyle)
  } else {
    if (!homePageStyle) return

    homePageStyle.remove()
    homePageStyle = undefined
  }
}